import React from 'react';
import { useAppContext } from '../contexts/AppContext';
import ServerRoom3DView from '../components/3d/ServerRoom3DView';
import useEnvironmentalSensors from '../hooks/useEnvironmentalSensors';
import usePowerDevices from '../hooks/usePowerDevices';
import useHvacDevices from '../hooks/useHvacDevices';
import MonitoringPanel from '../components/monitoring/MonitoringPanel';
import './Stats3DLayout.css';

/**
 * 统计3D布局组件
 * 3D服务器机房视图填充整个屏幕
 */
const Stats3DLayout: React.FC = () => {
  const { data, selectedDevice, setSelectedDevice } = useAppContext();
  
  // 使用自定义hook处理环境传感器数据
  const environmentalSensors = useEnvironmentalSensors(data.facilities);
  
  // 使用自定义hook处理电力设备数据
  const powerDevices = usePowerDevices(data.facilities);
  
  // 使用自定义hook处理HVAC设备数据
  const hvacDevices = useHvacDevices(data.facilities);
  
  // 处理机柜选择事件
  const handleCabinetSelect = (cabinetId: string) => {
    const selectedCabinet = data.cabinets.find(cabinet => cabinet.id === cabinetId);
    if (selectedCabinet) {
      setSelectedDevice(selectedCabinet);
    }
  };

  return (
    <div className="stats-3d-layout">
      {/* 3D场景填充整个屏幕 */}
      <ServerRoom3DView 
        cabinets={data.cabinets} 
        environmentalSensors={environmentalSensors}
        powerDevices={powerDevices}
        hvacDevices={hvacDevices}
        onCabinetSelect={handleCabinetSelect}
        selectedCabinetId={selectedDevice?.id}
      />
      
      {/* 监控面板悬浮在3D场景之上 */}
      <MonitoringPanel />
    </div>
  );
};

export default Stats3DLayout;